<template>
    <div class="banner">
        <ul>
            <li v-for="item in items">
                <a :href="item.url">
                    <img :src="item.src" :alt="item.alt">
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    import banner01 from '../assets/banner01.jpg'
    import banner02 from '../assets/baner-ad02.png'
    import banner03 from '../assets/banner01.jpg'
    import banner04 from '../assets/produce-img.png'
    export default {
        name: 'Banner',
        data() {
            return {
                items:[{
                    "src": banner01,
                    "alt": "我是banner1的内容",
                    "url": "index.html"
                },{
                    "src": banner02,
                    "alt": "我是banner2的内容",
                    "url": "index.html"
                },{
                    "src": banner03,
                    "alt": "我是banner3的内容",
                    "url": "index.html"
                },{
                    "src": banner04,
                    "alt": "我是banner4的内容",
                    "url": "index.html"
                }]
            }
        }
    }
    $(document).ready(function(){
        
        $('.banner li:gt(0)').hide();//页面载入隐藏大于1的banner对象
        console.log(1);
        function bannerToggle(imgObj){
            var obj=$(imgObj).find('li');    //图片对象
			var count=obj.length;    //计数器
			//alert(count);
            this.SatrToggle=function(){
                function Toggle(){  //内部函数，可以直接调用外部变量
                    if(count<4){
                        obj.eq(count).fadeIn(1000).siblings().hide();//如果小于第四张则当显示当前隐藏兄弟元素
                        count++;
                    }else{
                        count=0;
                        obj.eq(count).fadeIn(1000).siblings().hide();//count大于4返回第1张显示
                    }
                }
                setInterval(Toggle,4000);//实例化对象时调用对象方法时直接进行循环切换显示
            };
        }
        new bannerToggle('.banner').SatrToggle();//实例化对象并直接调用对象方法
    });
</script>   
<style>
    .banner {height:15rem;width:100%;margin:0 auto;overflow: hidden;}
    .banner ul li a img{height:15rem;width:100%;margin:0 auto;}
    .banner ul li a img:nth-of-type{display:none;}
</style> 